<template>
<div>
    <div v-if="login">
         <div class="layout">
             <Layout :style="{minHeight: '100vh'}">
                 <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                   <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
                    <MenuItem name="1-1">
                        <router-link to="/" active-class="active" exact>
                            <Icon type="ios-navigate"></Icon>
                            <span>首页管理</span>
                        </router-link>
                    </MenuItem>
                    
                    <MenuItem name="1-2">
                        <router-link to="/cate" active-class="active">
                            <Icon type="navicon"></Icon>
                            <span>分类管理</span>
                        </router-link>
                    </MenuItem>
                    <MenuItem name="1-3">
                        <router-link to="/user" active-class="active">
                            <Icon type="search"></Icon>
                            <span>用户管理</span>
                        </router-link>
                    </MenuItem>
                    <MenuItem name="1-4">
                        <router-link to="/news" active-class="active">
                           <Icon type="arrow-swap"></Icon>
                            <span>新闻管理</span>
                        </router-link>
                    </MenuItem>
                    <MenuItem name="1-5">
                        <router-link to="/product" active-class="active">
                            <Icon type="settings"></Icon>
                            <span>产品管理</span>
                        </router-link>
                    </MenuItem>
                </Menu>
            </Sider>
             <Layout>
               <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                    <div class="head1">
                       <h3>eShop电商平台</h3> 
                       <div class="info">
                             <span class="username">{{name}}</span><span >,欢迎你</span>
                             <Button type="primary" @click="logout" >注销</Button>
                        </div>                    
                    </div>               
                </Header>
               <Content :style="{padding: '0 16px 16px'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
                        <BreadcrumbItem to="/">首页</BreadcrumbItem>
                        <BreadcrumbItem to="/">Components</BreadcrumbItem>
                        <BreadcrumbItem>Layout</BreadcrumbItem>
                   
                    </Breadcrumb>
 
                    <Card>                  
                        <div style="height: 530px">
                         <router-view></router-view>
            
                    <!-- date -->
                 
                    <!-- end -->
                    </div>
                  </Card>
                </Content>
                <div class="layout-copy">
                 2017-2018 &copy; eShop电商后台管理
                </div>
            </Layout>
        </Layout>
       
    </div>
    </div>
     <div v-else class="logins">
          <div class="head">
          <div class="logo">
          <Icon type="ionic"></Icon>
          <h1>eShop电商购物后台管理系统</h1>
          </div>
         </div>
      <div class="form">
          <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
            <FormItem prop="name">
                <Input type="text" v-model="formInline.name" placeholder="Username">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="Password">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')" class="ivu-btn1">登录</Button>
                <Button type="primary" @click="modal1 = true">注册</Button>            
            </FormItem>
        </Form>
    </div>  
    <Modal
        v-model="modal1"
        title="用户注册"     
        >
        <Form label-position="top" ref=" formInline" :model=" formInline">
            <FormItem label="用户名" prop="name">
                <Input type="text" v-model=" formInline.name" @on-blur="onBlur"></Input>
                <span v-if="!bstop" style="color:red">{{isexist}}</span>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input type="password" v-model=" formInline.password"></Input>
            </FormItem>
            <FormItem label="邮箱" prop="mail">
                <Input v-model=" formInline.mail" type="email" ></Input>
            </FormItem>
            <FormItem>
                  <Button type="primary" @click="handleSubmit1(' formInline')" style="margin:0 20px 0 150px">提交</Button>
                  <Button type="ghost" @click="handleReset1(' formInline')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </Modal>

     <div class="layout-copy">
        2017-2018 &copy; eShop电商后台管理
     </div>
    </div>
</div>
</template>
<script>
import md5 from "crypto-js/md5";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      isexist: "用户名已存在",
      bstop: true,
      modal1: false,
      isCollapsed: false,
      formInline: {
        name: "",
        password: "",
        mail: ""
      },
      ruleInline: {
        user: [{ required: true, message: "请填写用户名", trigger: "blur" }],
        password: [
          { required: true, message: "请填写密码", trigger: "blur" },
          { type: "string", min: 6, message: "密码长度不能小于6位", trigger: "blur" }
        ]
      },
      ruleValidate: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        mail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入安全密码", trigger: "blur" }]
      }
      /***end***/
    };
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
    /*
      mapGetters工具函数会将store中的getter映射到局部计算属性中,
      使用对象扩展操作符把getter混入到computed中
      */
    ...mapGetters(["login"]),
    iconSize() {
      return this.spanLeft === 5 ? 14 : 24;
    }
  },
  methods: {
    ...mapActions(["checkLogin"]),

    //表单提交，并给密码加密
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          // this.formInline.password = md5(this.formInline.password).toString();
          this.$http({
            method: "post",
            url: "http://10.31.153.25:3000/users/login",
            data: {
              name: this.formInline.name,
              password: this.formInline.password
            }
          }).then(res => {
            if (res.data.name && res.data.password) {
              sessionStorage.login = true;
              this.checkLogin(sessionStorage.login);
              this.$Message.success("登录成功");
              this.name = res.data.name;
            } else {
              this.$Message.error("用户名或密码错误");
            }
          });
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    //退出登录
    logout() {
      if (confirm("确认退出吗？")) {
        this.checkLogin(false);
      }
    },
    // 表单注册
    handleSubmit1(name) {
      this.onBlur();
      if (this.bstop) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.$http({
              method: "post",
              url: "http://10.31.153.25:3000/users/data",
              data: this.formInline
            }).then(res => {
              Object.assign(
                this.$data.formInline,
                this.$options.data().formInline
              );
              this.modal1 = false;
            });
          } else {
            console.log(22222);
          }
        });
        this.$Message.success("success");
      } else {
        this.$Message.error("表单验证失败!");
      }
    },

    handleReset1(name) {
      this.$refs[name].resetFields();
    },

    onBlur() {
      this.$http({
        method: "post",
        url: `http://localhost:3000/users/register`,
        data: {
          name: this.formInline.name
        }
      }).then(res => {
        console.log(res.data);
        if (res.data) {
          this.bstop = false;
        } else {
          this.bstop = true;
        }
      });
    }
  },

  created() {
    sessionStorage.login = true;
    this.checkLogin(localStorage.login);
  }
};
</script>

<style >


/* 注意：iview修改默认样式需要把scoped去掉，才能生效
为了影响其他样式，可以单独写一个style
 */
.ivu-modal-footer {
  opacity: 0;
}
</style>

<style scoped lang="scss">
.layout-copy {
  text-align: center;
  line-height:50px;
}
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.ivu-layout-header {
  padding: 0;
}
.active {
  color: white;
}

.info {
  padding-right: 30px;
  button:hover {
    background: rgb(135, 195, 222);
    color: #fff;
  }
}

.logins {
  width: 1440px;
  height: 794px;
  overflow: hidden;
  background: url("img/3.jpg") 100% 100%;
}
.head {
  margin-top: 70px;
}
.logo {
  display: flex;
  justify-content: center;
}
h1 {
  line-height: 80px;
  margin-left: 30px;
}
.ivu-icon-ionic {
  font-size: 80px;
}
.ivu-layout-header {
  padding: 0;
}
.form {
  width: 360px;
  height: 300px;
  margin: 50px auto;
  padding: 20px 0;
  border: 1px dashed #ccc;
  padding: 15px;
}
form {
  margin-top: 20px;
}
.ivu-form-item {
  padding: 10px 0;
}
.ivu-btn {
  width: 80px;
}

.ivu-btn1 {
  margin: 0 20px 0 75px;
}
.ivu-form-inline .ivu-form-item {
  display: block;
}
.ivu-icon-ios-locked-outline,
.ivu-icon-ios-person-outline {
  font-size: 22px;
}

.head1 {
  overflow: hidden;
  background: url(img/2.jpg) 100% 100%;
  color: #fff;
  font-size: 20px;
  padding-left: 50px;
  display: flex;
  justify-content: space-between;

  .info {
    padding-right: 30px;
    button:hover {
      background: rgb(135, 195, 222);
      color: #fff;
    }
  }
  span {
    font-size: 14px;
  }
  .username {
    font-size: 16px;
    color: orangered;
  }
}
</style>